<template>
    <div class="main dispaly-center pointer" @click="clickItem">
        <div class="cover">
            <img :src="item.img">
        </div>
        <div class="detail dispaly-column-between">
            <div class="title over-2">{{ item.title }}</div>
            <div class="time">{{ item.createTime }}</div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
    item: Object,
    type: String
})

const state = reactive({})

// 跳转详情
const router = useRouter()
const clickItem = () => {
    router.push({
        path: '/detail',
        query: { id: props.item.id, type: props.type, tValue: props.type == 'culture' ? props.item.subType : props.item.type }
    })
}
</script>
<style lang="scss" scoped>
.main {
    padding-bottom: 18px;
    border-bottom: 2px dashed #ccc;
    margin-bottom: 20px;

    .cover {
        margin-right: 20px;

        img {
            width: 200px;
            height: 130px;
            border-radius: 5px;
        }
    }

    .detail {
        height: 130px;

        .title:hover {
            color: $primary-color;
        }

        .title {
            font-family: MicrosoftYaHei;
            font-size: 18px;
            color: #000000;
        }

        .time {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #777777;
        }
    }
}
</style>